<template>
  <div class="video">
      <HomePage/>
       <list-title >赞助商家</list-title>
  <my-loading v-if="banners.length == 0"></my-loading>
 <MusicSwiper  :banners="banners" />
     <list-title>全部MV</list-title>
      <my-loading v-if="mvs.length == 0"></my-loading>
      <ul class="imgList" >
      <img-item
        v-for="mv in mvs"
        :key="mv.id"
        :song="mv"
        path="/mv"
      ></img-item>        
    </ul>
      <MusicTabBar :actives="2" />
  </div>
</template>

<script>
import HomePage from "@/components/video/HomePage.vue"
import MusicTabBar from "@/components/Tab_bar/Tab_bar.vue";
import MyLoading from "@/components/video/MyLoading.vue";
import ListTitle from "@/components/video/ListTitle.vue";
import ImgItem from "@/components/video/ImgItem.vue";
import MusicSwiper from "../components/home/swiper.vue";
import { GETTOPICAPI,  GETBANNERAPI, GETMVAPI} from "@/api/api.js";
export default {
  name: "Video",
  data() {
    return {
     events:[],
      mvs: [],
       banners: [],
    };
  },
  components: {
      HomePage,
    MusicSwiper,
      MusicTabBar,
      MyLoading,
    ListTitle,
    ImgItem,
   
  },
   mounted() {
        GETTOPICAPI({actid:111551188}).then((res) => {
    this.events=res.data.events
     
      GETBANNERAPI().then((res) => {
      this.banners = res.data.banners;
     
    });
     
    });
    GETMVAPI().then((res) => {
      this.mvs = res.data.data;
     
    });
    this.$store.commit("SET_HIGHLY", true);
  },
  destroyed() {
    this.$store.commit("SET_HIGHLY", false);
  },

 };
</script>
<style scoped lang="less">
.imgList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding-top: 10px;
    margin:10px 0;
  
    justify-content: space-evenly;
    li{
      width: 170px;
    }
}
</style>